<template>
	<view class="app">
		<jnavbar :title="'拼团详情'"></jnavbar>
		<view class="page_container">
			<u-gap height="20"></u-gap>
			<view class="good_div">
				<view class=" u-flex">
					<!-- <view class="" style="width:240rpx;height:240rpx"></view> -->
					<!-- <vimage :src="commodity.master"></vimage> -->
					<vimage class="img_box" :src="commodity.master" mode=""></vimage>
					<view style="height:240rpx" class="u-flex  u-m-l-10 u-flex-col u-flex-1 u-col-top u-row-between">
						<view class="">
							<view class="u-line-2 u-main-color">
								<text class="group_div">{{ success_num }}人团</text>
								<text>{{ commodity.name }}</text>
							</view>
							<!-- <text class="u-line-1 u-tips-color">1111111</text> -->
						</view>
						<view class="u-flex u-flex-col u-col-top ">
							<view class="" style="color:#ff3c29">
								<text class="u-font-sm">拼团价：￥</text>
								<text class="u-font-40">{{ commodity.activity_price }}</text>
							</view>
							<view class="u-tips-color u-font-sm">
								<text>单买价：￥</text>
								<text>{{ commodity.sell_price }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class=" u-font-24 u-p-t-20"><text>拼团规则：支持开团邀请好友参团，人数不足自动退款</text></view>
			</view>

			<view class="u-flex u-flex-col good_div u-m-t-20">
				<block v-if="(h_time > 0) & (detial.status == 1)">
					<u-divider>拼团剩余时间</u-divider>
					<view class="u-m-t-20">
						<u-count-down
							@end="getdetail"
							separator-size="24"
							font-size="24"
							separator-color="#000"
							bg-color="#ff3c29"
							color="#fff"
							:timestamp="h_time"
							separator="zh"
						></u-count-down>
					</view>
				</block>
				<view class="u-m-t-20" v-if="detial.status == 11"><text>拼团失败</text></view>
				<view class="u-m-t-20" v-if="detial.status == 2"><text>拼团完成</text></view>
				<view class="u-m-t-20" v-if="detial.status == 1">还差{{ nextnum }}人即可拼团成功</view>
				<view class="collageItem u-flex u-m-t-20">
					<view v-if="Number(success_num) < 10" class="collageItem_item " v-for="(item, index) in success_num">
						<block v-if="collageItem[index]">
							<view class="img_box"><vimage imgtype="1" :src="collageItem[index]" mode=""></vimage></view>
						</block>
						<block v-else>
							<view class="invite-btn u-flex u-row-center"><text class="el-sc-jia3"></text></view>
						</block>
					</view>
					<view v-if="Number(success_num) >= 10" class="collageItem_item " v-for="(item, index) in 10">
						<block v-if="collageItem[index]">
							<view class="img_box"><vimage imgtype="1" :src="collageItem[index]" mode=""></vimage></view>
						</block>
						<block v-else>
							<view class="invite-btn u-flex u-row-center"><text class="el-sc-jia3"></text></view>
						</block>
					</view>
					<view v-if="Number(success_num) >= 10"><text>...</text></view>
				</view>
			</view>

			<view v-if="detial.status == 1 && userInfo.id == detial.user.id" class="u-p-l-40 u-p-r-40 u-m-t-20">
				<u-button type="primary" shape="circle" @click="showshare = true">邀请好友参团</u-button>
			</view>
			<view v-if="detial.status == 1 && userInfo.id != detial.user.id" class="u-p-l-40 u-p-r-40 u-m-t-20">
				<u-button @click="gotrolley" type="primary" shape="circle">加入拼团</u-button>
			</view>

			<view class="u-p-l-40 u-p-r-40 u-m-t-20" v-if="is_order"><u-button type="default" shape="circle" @click="toorder">查看订单详情</u-button></view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
		<trolley :g_id="id" :l_id='l_id'></trolley>
		<view class="sharepup">
			<view class="hideCanvasView">
				<canvas class="hideCanvas" canvas-id="mini_poster" :style="{width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px'}"></canvas>
			</view>
			<u-popup v-model="showshareimg" :closeable="true" mode="center">
				<block v-if="poster.finalPath">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
					<view class="savecanvas" @click="toSaveImage"><text>保存到相册，分享给好友</text></view>
				</block>
			</u-popup>
			<u-popup mode="bottom" v-model="showshare">
				<view class="uni-share-box">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" style="margin-right: 88upx;" class="uni-share-item uni-share-btn">
						<vimage class="sharea" imgtype="1" src="static/images/share1.png" mode=""></vimage>
						<text class="txt">发送给好友</text>
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="uni-share-item" @click="sharewx">
						<vimage class="sharea" imgtype="1" src="static/images/share1.png" mode=""></vimage>
						<text class="txt">发送给好友</text>
					</view>
					<!-- #endif -->

					<!-- style="margin-right: 88upx;" -->
					<view class="uni-share-item" @click="shareimg">
						<vimage class="shareb" imgtype="1" src="static/images/share2.png" mode=""></vimage>
						<text class="txt">生成海报分享</text>
					</view>
				</view>
				<view class="uni-share-cancal" @click="showshare = false">取消</view>
			</u-popup>
			<u-mask :show="shareH5" @click="shareH5 = false" :zoom="false">
				<view class="warp">
					<view class="share_bg" @tap.stop>
						<vimage class="image" imgtype="1" src="static/images/share.png"></vimage>
						<text class="txt">快乐的事物需要分享亲，点击此处可以分享你的快乐呦！</text>
						<view class="btns" @click="shareH5 = false">我知道了</view>
					</view>
				</view>
			</u-mask>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {getSharePoster} from '@/common/QS-SharePoster/QS-SharePoster.js';
import _app from '@/common/QS-SharePoster/app.js';
import util from '@/common/util.js';
import {setShare} from '@/common/wxJsSDK';
export default {
	onShareAppMessage() {
		let data = this.wxSharedata;
		return this.wxShare(data.title, data.imageUrl, data.content, data.path);
	},
	data() {
		return {
			commodity: {},
			collageItem: [],
			h_time: 0,
			detial: {},
			id: 0,
			showshare: false,
			showshareimg: false,
			canvasW: 0,
			canvasH: 0,
			canvasId: 'mini_poster',
			poster: {},
			shareH5: false,
			goodurl: '',
			mpWxQr: '',
			nextnum: 1,
			success_num: 0,
			wxSharedata: {
				title: '',
				imageUrl: '',
				content: '',
				path: ''
			},
			l_id:0,
			is_order:false
		};
	},
	computed: {
		...mapState({
			hastabbar: state => state.hastabbar,
			userInfo: state => state.userInfo
		})
	},
	async onLoad(e) {
		await this.$getWx;
		
		// #ifdef MP-WEIXIN
		if (e && e.scene) {
			const scene = decodeURIComponent(e.scene);
			var id = util.getQueryVariable('id', scene);
			e.id = id;
		}
		
		// #endif
		this.id = Number(e.id);
		this.getdetail();
	},
	methods: {
		toorder() {
			this.Jumpurl({
				type: 1,
				link: '../order/orderdetail?type=4&id=' + this.detial.order_id,
				login_type: 2
			});
		},
		sharewx() {
			this.showshare = false;
			this.shareH5 = true;
		},
		gotrolley() {
			let data = {
				show: true,
				id: this.commodity.id,
				type: 1
			};
			this.$store.commit('settrolley', data);
		},
		logincallback() {
			this.getdetail();
		},
		async shareFc() {
			// this.$refs.canvaspopup.open();
			this.showshareimg = true;
			let that = this;
			const ctx = uni.createCanvasContext(this.canvasId, this);
			// try {
			// console.log('准备生成:' + new Date());
			let backgroundImage = util.getimgurl('static/images/haibaobg.png', '1');
			const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				// type: 'goodsPoster',
				backgroundImage: backgroundImage, //接口返回的背景图
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				draw: false,
				Context: ctx,
				posterCanvasId: this.canvasId, //canvasId
				delayTimeScale: 20, //延时系数
				drawDelayTime: 500, //draw延时时间
				drawArray: ({bgObj, type, bgScale}) => {
					const dx = bgObj.width * 0.3;
					const fontSize = bgObj.width * 0.042;
					const lineHeight = bgObj.height * 0.04;
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return [
						{
							type: 'image', //商品图片
							url: that.goodurl,
							alpha: 1,
							drawDelayTime: 800, //draw延时时间
							dx: bgObj.width * 0.056,
							dy: bgObj.width * 0.22,
							infoCallBack(imageInfo) {
								return {
									dWidth: bgObj.width * 0.88,
									dHeight: bgObj.width * 0.88,
									roundRectSet: {
										// 圆角矩形
										r: bgObj.width * 0.025
									}
								};
							}
						},

						{
							type: 'text', //价格
							// fontStyle: 'italic',//倾斜
							text: `拼团价:`,
							size: fontSize * 1.6,
							color: '#ff3c29',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							// fontWeight: 'bold',
							infoCallBack(textLength) {
								that.min_length = textLength;
								_app.log('index页面的text的infocallback ，textlength:' + textLength);
								return {
									dx: bgObj.width * 0.056,
									dy: bgObj.width * 1.245
								};
							},
							serialNum: 0
						},
						{
							type: 'text', //价格
							// fontStyle: 'italic',//倾斜
							text: `￥`,
							size: fontSize * 1.2,
							color: '#ff3c29',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							// fontWeight: 'bold',
							infoCallBack(textLength) {
								that.min_length_b = textLength;
								_app.log('index页面的text的infocallback ，textlength:' + textLength);
								return {
									dx: bgObj.width * 0.06 + that.min_length,
									dy: bgObj.width * 1.26
								};
							},
							serialNum: 0
						},
						{
							type: 'text', //价格
							// fontStyle: 'italic',//倾斜
							text: `${that.commodity.activity_price}起`,
							size: fontSize * 1.4,
							color: '#ff3c29',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							// fontWeight: 'bold',
							infoCallBack(textLength) {
								that.min_length_s = textLength;
								_app.log('index页面的text的infocallback ，textlength:' + textLength);
								return {
									dx: bgObj.width * 0.06 + that.min_length + that.min_length_b,
									dy: bgObj.width * 1.25
								};
							},
							serialNum: 0
						},

						{
							type: 'text', //价格
							// fontStyle: 'italic',//倾斜
							text: `原价 ￥${that.commodity.sell_price}`,
							size: fontSize * 1,
							color: '#999999',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							lineThrough: {
								style: '#999999'
							},
							infoCallBack(textLength) {
								return {
									dx: bgObj.width * 0.08 + that.min_length + that.min_length_s + that.min_length_b,
									dy: bgObj.width * 1.265
								};
							},
							serialNum: 0
						},

						{
							type: 'text', //
							// fontStyle: 'italic',//倾斜
							text: `${that.detial.success_num + 1}人拼团`,
							size: fontSize,
							color: '#ff3c29',
							backgroundColor: '#ff3c29',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							fontWeight: 'bold',
							lineFeed: {
								//换行
								maxWidth: bgObj.width * 0.88,
								lineHeight: bgObj.width * 0.07,
								lineNum: 2,
								dx: -1
							},
							infoCallBack(textLength) {
								// that.length1=textlength
								_app.log('index页面的text的infocallback ，textlength:' + textLength);
								return {
									dx: bgObj.width * 0.056,
									dy: bgObj.width * 1.34
								};
							},
							serialNum: 0
						},
						{
							type: 'text', //标题
							// fontStyle: 'italic',//倾斜
							text: that.commodity.name,
							size: fontSize,
							color: 'black',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							// fontWeight: 'bold',
							lineFeed: {
								//换行
								maxWidth: bgObj.width * 0.88,
								lineHeight: bgObj.width * 0.07,
								lineNum: 2,
								dx: -1
							},
							infoCallBack(textLength) {
								_app.log('index页面的text的infocallback ，textlength:' + textLength);
								return {
									dx: bgObj.width * 0.056,
									dy: bgObj.width * 1.42
								};
							},
							serialNum: 0
						},
						{
							type: 'image', //二维码
							url: that.mpWxQr,
							alpha: 1,
							drawDelayTime: 800, //draw延时时间
							dx: bgObj.width * 0.076,
							dy: bgObj.height - bgObj.width * 0.03 - bgObj.width * 0.3,
							infoCallBack(imageInfo) {
								return {
									dWidth: bgObj.width * 0.3,
									dHeight: bgObj.width * 0.3
									// roundRectSet: { // 圆角矩形
									// 	r: bgObj.width * 0.025
									// }
								};
							}
						},
						{
							type: 'text', //商户名称
							// fontStyle: 'italic',//倾斜
							text: `长按识别 立即下单！`,
							size: fontSize * 1.1,
							color: '#333333',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							// fontWeight: 'bold',
							infoCallBack(textLength) {
								_app.log('index页面的text的infocallback ，textlength:' + textLength);
								return {
									dx: bgObj.width * 0.48,
									dy: bgObj.width * 1.7
								};
							},
							serialNum: 0
						},

						{
							type: 'text', //
							// fontStyle: 'italic',//倾斜
							text: '快来加入团购吧',
							size: fontSize * 0.9,
							color: '#999999',
							alpha: 1,
							textAlign: 'left',
							textBaseline: 'middle',
							infoCallBack(textLength) {
								_app.log('index页面的text的infocallback ，textlength:' + textLength);
								return {
									dx: bgObj.width * 0.48,
									dy: bgObj.width * 1.8
								};
							},
							serialNum: 0
						}
					];
				},
				setCanvasWH: ({bgObj, type, bgScale}) => {
					console.log(bgObj);
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				}
			});
			console.log('开始绘制');
			console.log(ctx);
			ctx.draw(false, () => {
				uni.showToast({
					title: '绘制完成',
					icon: 'none'
				});
				console.log('完成绘制');
				uni.canvasToTempFilePath(
					{
						canvasId: this.canvasId,
						fileType: 'jpg',
						quality: 0.8,
						success: res => {
							this.$set(this.poster, 'finalPath', res.tempFilePath);
							console.log('生成图片成功: ' + res.tempFilePath);
						}
					},
					this
				);
			});
		},
		getdetail() {
			this.$http('/collage/' + this.id, {}, 'GET').then(res => {
				let detial = res.data.msg;
				this.detial = detial;
				let commodity = {
					name: detial.commodity.name,
					master: detial.commodity.master,
					sell_price: detial.commodity.sell_price,
					id: detial.commodity.id
				};
				let groupCommodity = detial.groupCommodity;

				this.nextnum = detial.success_num - detial.collageItem.length;
				this.success_num = detial.success_num + 1;
				let goodurl = detial.commodity.share ? detial.commodity.share : detial.commodity.master;
				this.goodurl = util.getimgurl(goodurl);

				if (groupCommodity.type == 1) {
					if (groupCommodity.has_sku) {
						commodity.activity_price = this.getminprice(groupCommodity.sku, 1);
					} else {
						commodity.activity_price = groupCommodity.activity_price;
					}
				} else {
					let success_num = JSON.parse(groupCommodity.success_num);
					let level = success_num.findIndex(_ => {
						return _ == detial.success_num + 1;
					});
					this.l_id=Number(level)
					if (groupCommodity.has_sku) {
						commodity.activity_price = this.getminprice(groupCommodity.sku, 2, level);
					} else {
						groupCommodity.activity_price = JSON.parse(groupCommodity.activity_price);

						commodity.activity_price = Number(groupCommodity.activity_price[level]).toFixed(2);
					}
				}
				this.commodity = commodity;
				let collageItem = [];
				collageItem.push(detial.user.picurl);
				let userlist=[];
				userlist.push(detial.user_id);
				detial.collageItem.forEach(a => {
					if (a.is_robot) {
						let user = JSON.parse(a.user_id);
						collageItem.push(user[1]);
					} else {
						collageItem.push(a.user.picurl);
						userlist.push(a.user.id)
					}
				});
				this.collageItem = collageItem;
				this.is_order=userlist.findIndex(_=>_==this.userInfo.id)>-1
				
				
				console.log(this.collageItem);
				let time = (new Date() - new Date(detial.create_time)) / 1000;
				console.log(time);
				let limit_time = groupCommodity.limit_time * 60;
				this.h_time = limit_time - time + 5;

				// #ifdef MP-WEIXIN
				this.wxSharedata = {
					title: '',
					imageUrl: '',
					content: '',
					path: 'orderpage/groupdetial/groupdetial?id=' + this.id
				};
				// #endif
				// #ifndef MP-WEIXIN
				let url = window.location.href;
				let index = url.indexOf('?');
				if (index != -1) {
					url = url;
				}
				let data = {
					title: '',
					desc: '',
					imgUrl: '',
					link: url
				};
				setShare(data);
				// #endif
			});
		},
		getminprice(list, type, level) {
			debugger;
			// let minprice=0
			if (type == 1) {
				let min_list = list.sort((a, b) => {
					return Number(a.activity_price) - Number(b.activity_price) > 0;
				});
				console.log(min_list);
				return min_list[0].activity_price;
			} else {
				list.forEach(a => {
					a.activity_price = JSON.parse(a.activity_price);
				});
				console.log(list);
				let min_list = list.sort((a, b) => {
					return Number(a.activity_price[level]) - Number(b.activity_price[level]) > 0;
				});

				return Number(min_list[0].activity_price[level]).toFixed(2);
			}
		},
		//绘制海报图
		shareimg() {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			this.showshare = false;
			var userid = uni.getStorageSync('userid');
			var mall_id = uni.getStorageSync('mall_id');

			const that = this;
			let id = that.id;
			// #ifdef H5
			var params = {
				path: '/h5/#/orderpage/groupdetial/groupdetial',
				data: {
					id: id
				}
			};
			if (this.agent_id) {
				params.data.p = this.agent_id;
			}
			if (mall_id) {
				params.data.mall_id = mall_id;
			}
			// #endif
			// #ifdef MP-WEIXIN
			var params = {
				page: 'orderpage/groupdetial/groupdetial',
				scene: 'id=' + id
			};
			if (this.agent_id) {
				params.scene += '&p=' + this.agent_id;
			}
			// #endif
			this.$http('/qrcode', params, 'GET').then(res => {
				const json = res.data;
				uni.hideLoading();
				that.mpWxQr = util.getimgurl(json.msg, 1);
				// that.toDrawCanvas();
				that.shareFc();
			});
		},

		//画布文本分行
		textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
			var drawTxt = ''; // 当前绘制的内容
			var drawLine = 1; // 第几行开始绘制
			var drawIndex = 0; // 当前绘制内容的索引

			// 判断内容是否可以一行绘制完毕
			if (ctx.measureText(content).width <= lineMaxWidth) {
				ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
			} else {
				for (var i = 0; i <= content.length; i++) {
					drawTxt += content[i];
					if (ctx.measureText(drawTxt).width > lineMaxWidth) {
						if (drawLine === lineNum) {
							// 最后一行添加省略号
							ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY);
							break;
						} else {
							// 不是最后一行的情况
							ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
							drawIndex = i + 1; // 记录当前行最后一个字符串的下一个idnex，用于绘制下行第一个字
							drawLine += 1; // 行数+1
							drawY += lineHeight; // 绘制内容的y坐标对应增加行高
							drawTxt = ''; // 重置绘制的内容
						}
					}
				}
			}
		},
		//画布绘制
		toDrawCanvas() {
			const left_padding = uni.upx2px(64);
			const top_padding = uni.upx2px(120);
			this.show = true;
			let ctx = uni.createCanvasContext('mini_poster');
			ctx.fillStyle = '#FFFFFF';
			ctx.fillRect(0, 0, this.canvasW, this.canvasH);
			ctx.setFillStyle('#333333');

			ctx.setFontSize(uni.upx2px(34));

			const title_w = uni.upx2px(49);
			const title_h = uni.upx2px(632);
			// ctx： 画布的上下文环境
			// content： 需要绘制的文本内容
			// drawX： 绘制文本的x坐标
			// drawY： 绘制文本的y坐标
			// lineHeight：文本之间的行高
			// lineMaxWidth：每行文本的最大宽度
			// lineNum：最多绘制的行数
			this.textPrewrap(ctx, this.details.name, title_w, title_h, uni.upx2px(50), uni.upx2px(260), 3);
			const imgw = uni.upx2px(526);
			const imgh = uni.upx2px(526);
			const pd = uni.upx2px(36);
			var pic = util.getimgurl(this.details.master);
			uni.downloadFile({
				url: pic,
				success: res => {
					const imgbx = uni.upx2px(200);
					ctx.drawImage(res.tempFilePath, pd, pd, imgw, imgh);
				},
				fail() {
					uni.showToast({
						icon: 'none',
						title: '小程序码下载失败'
					});
				}
			});
			ctx.fillText('￥ ' + this.details.sell_price, uni.upx2px(45), uni.upx2px(792));
			const that = this;

			uni.downloadFile({
				url: this.mpWxQr,
				success: res => {
					const imgbx = uni.upx2px(200);
					ctx.drawImage(res.tempFilePath, uni.upx2px(363), uni.upx2px(603), imgbx, imgbx);
					ctx.draw();
					uni.hideLoading();
				},
				fail() {
					uni.showToast({
						icon: 'none',
						title: '小程序码下载失败'
					});
				}
			});
		},
		//保存图片
		toSaveImage() {
			util.toSaveImage(this.poster.finalPath);
		}
	}
};
</script>

<style lang="scss">
.good_div {
	background: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	width: 720rpx;
	margin-left: 15rpx;
}
.img_box {
	width: 240rpx;
	height: 240rpx;
}
.collageItem {
	flex-wrap: wrap;
	width: 400rpx;
	.collageItem_item {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		.img_box {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
}
.group_div {
	background: var(--main-color);
	color: #fff !important;
	padding: 2rpx 5rpx;
	border-radius: 10rpx;
	margin-right: 5rpx;
}
.uni-share-box {
	width: 100%;
	height: 229upx;
	display: flex;
	justify-content: center;

	.uni-share-btn {
		margin: 0;
		padding: 0;
		background: #fff;
		border: 1upx solid #fff;
		font-size: 24upx;
		line-height: 1;

		// position:absolute
	}

	.uni-share-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		text {
			color: #211f2d;
			opacity: 0.55;
			font-size: 24upx;
		}

		.sharea {
			margin-top: 55upx;
			width: 91upx;
			height: 74upx;
			margin-bottom: 29upx;
		}

		.shareb {
			margin-top: 53upx;
			width: 85upx;
			height: 80upx;
			margin-bottom: 25upx;
		}
	}
}
.uni-share-cancal {
	border-top: 2upx solid rgba(33, 31, 45, 0.11);
	height: 100upx;
	text-align: center;
	line-height: 100upx;
	width: 100%;
}
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
}

.share_bg {
	width: 750rpx;
	color: #ffffff;
	// height: 100vh;
	// overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	.image {
		position: absolute;
		top: 100rpx;
		right: 140rpx;
		display: block;
		width: 217rpx;
		height: 259rpx;
	}
	.txt {
		display: block;
		width: 276rpx;
		height: 129rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		line-height: 50rpx;
		text-align: center;
	}
	.btns {
		margin-top: 220rpx;
		width: 430rpx;
		height: 80rpx;
		border: 2rpx solid #ffffff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: bold;
	}
}
.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
.invite-btn {
	border-radius: 50%;
	border: 1px dashed #e6e7eb;
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	text {
		font-size: 40rpx;
	}
}
.savecanvas {
	width: 600upx;
	height: 101upx;
	line-height: 101upx;
	text-align: center;
	margin-top: 60upx;
	background: rgba(255, 255, 255, 1);
}
.posterImage {
	width: 600upx;
}
</style>
